import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { FormInstance } from 'antd/lib/form';
import {
  Modal,
  Button,
  message,
  Input,
  Select,
  TreeSelect,
  Form,
  Card,
  Row,
  Col,
  Upload,
  Popconfirm,
} from 'antd';
import { getToken } from '@/utils/utils';
import { getCountFn, handleExportExcel } from './variable';
import ExcelName from './excelName';

const FormItem = Form.Item;
const mapStateToProps = (state: any) => ({
  audienceList: state.audienceList,
  loading: state.loading.effects['audienceList/postObjWithRes'],
});
class AudienceDetailModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();

  constructor(props: any) {
    super(props);
    this.state = {
      whiteList: [],
      vinBI: [],
      vinWhite: [],
      vinBlack: [],
      vinTotal: 0,
      buttonLoading: false,
      vinFileUrl: '',
    };
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  setData = record => {
    setTimeout(() => {
      const fillFileds = {
        objectGroupName: record.objectGroupName,
        // vinTotal: record.list.length,
      };
      this.formRef.current?.setFieldsValue(fillFileds);
    }, 10);
    const { list, objectGroupCount } = record;
    const obj = getCountFn(list);

    this.setState({
      ...obj,
      recordObj: record,
      vinTotal: objectGroupCount,
    });
  };

  close = () => {
    // this.formRef.current?.resetFields();
    const { closeModal } = this.props;
    closeModal();
  };

  // 导出数据
  handleExportExcel = () => {
    handleExportExcel.call(this);
  };

  textFn = (obj: any) => {
    const { fileUri, fileName } = obj || {};
    const name = fileName || fileUri;
    return <ExcelName name={name}></ExcelName>;
  };

  render() {
    const { modalVisible, loading, detailData } = this.props;
    const {
      whiteList,
      vinBI,
      vinWhite,
      vinBlack,
      vinTotal,
      buttonLoading,
      vinFileUrl,
    } = this.state;
    const footer = (
      <div>
        <Button size="small" onClick={this.close}>
          返回
        </Button>
      </div>
    );
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      },
    };
    return (
      <Modal
        style={{ top: 20 }}
        footer={footer}
        title="查看"
        visible={modalVisible}
        onCancel={this.close}
      >
        <Form style={{ marginTop: 12 }} ref={this.formRef} onFinish={this.ok} layout="vertical">
          <FormItem
            {...formItemLayout}
            label="受众对象组名称"
            name="objectGroupName"
            rules={[{ required: true, message: '请输入受众对象组名称' }]}
          >
            <Input placeholder="请输入" disabled />
          </FormItem>
          <span>受众对象组名单</span>
          <div style={{ marginTop: 10 }}>
            <Card bordered={true}>
              <div>
                <Row>
                  <Col span={6}>BI名单（基础）</Col>
                  <Col span={18}>
                    <a href={vinBI[0]?.fileUri}>{this.textFn(vinBI[0])}</a>
                  </Col>
                </Row>
              </div>
              <div style={{ marginTop: 20 }}>
                <Row>
                  <Col span={6}>
                    <span style={{ float: 'left' }}>白名单（增补）</span>
                  </Col>
                  <Col span={18}>
                    <a href={vinWhite[0]?.fileUri}>{this.textFn(vinWhite[0])}</a>
                  </Col>
                </Row>
              </div>
              <div style={{ marginTop: 20 }}>
                <Row>
                  <Col span={6}>
                    <span style={{ float: 'left' }}>黑名单（剔除）</span>
                  </Col>
                  <Col span={18}>
                    <a href={vinBlack[0]?.fileUri}>{this.textFn(vinBlack[0])}</a>
                  </Col>
                </Row>
              </div>
              {/* <div style={{marginTop: 20}}>
                                <Row>
                                    <Col>
                                        {<Button size="small" type="primary" onClick={() => this.handleExportExcel()}>导出数据</Button>}
                                        {(<span style={{}}>共计{ vinTotal + "条"}</span>)}
                                    </Col>
                                </Row>
                            </div> */}
              <div style={{ color: 'gray', marginTop: 20, fontSize: 'small' }}>
                <Row>
                  <Col span={3}>
                    <span>说明：</span>
                  </Col>
                  <Col span={21}>
                    <span>
                      1.受众对象组的对象总数 = BI名单（基础）对象数 + 白名单（增补）对象数 -
                      黑名单（剔除）对象数（当数据有重复时，两者不相等）；
                    </span>
                  </Col>
                </Row>
                <Row>
                  <Col span={3}>
                    <span></span>
                  </Col>
                  <Col span={21}>
                    <span>2.受众对象具有唯一性，不允许重复；</span>
                  </Col>
                </Row>
                {/* <Row>
                                    <Col span={3}>
                                        <span></span>
                                    </Col>
                                    <Col span={21}>
                                        <span>3.导入数据异步完成之后，方可查看名单数量；</span>
                                    </Col>
                                </Row> */}
              </div>
            </Card>
          </div>
        </Form>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(AudienceDetailModal);
